<template>
  <div>
    我是缓存测试二：<input type="text" placeholder="请输入" v-model="path"/>
  </div>
</template>

<script setup>
//引入对象
import {ref,onActivated} from 'vue';
//引入对象
import { onBeforeRouteLeave, useRoute,onBeforeRouteUpdate } from "vue-router";

//定义path对象
const path = ref('');
//定义route对象
const route = useRoute();

//组件内守护方法，离开组件前，保存当前活动的路由路径
onBeforeRouteLeave((to,from,next)=>{
  alert("进入了离开钩子调用")
  next();
})

onBeforeRouteUpdate((to, from, next) => {
  // 在导航到当前路由时恢复操作状态
  console.log('回到当前路由，恢复操作状态');
  // 这里可以恢复之前保存的操作状态
  alert("进入了恢复操作正在执行")
  next();
});

</script>

<style scoped>

</style>